<template>
  <div id="main_div">
    <el-card style="width: 500px;height: 300px;margin: 50px auto">
      <el-form label-width="80px" style="margin-top: 50px;width: 430px">
        <el-form-item label="用户名">
          <el-input placeholder="请输入用户名" v-model="user.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" placeholder="请输入密码" v-model="user.password"></el-input>
        </el-form-item>
        <el-form-item style="text-align: center">
          <el-button type="primary" style="position:relative;right:30px;" @click="login()">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "LoginView",
  data() {
    return {
      user: {username:"",password:""}
    }
  },
  methods: {
    login() {
      let data = this.qs.stringify(this.user);
      this.axios.post("http://localhost:8080/v1/users/login",data)
      .then((response)=>{
        if (response.data.code==1){
          this.$message.success('登录成功!');
          //把服务器响应的个人信息保存
          localStorage.setItem("user",JSON.stringify(response.data.data));
          //跳转到个人中心页面
          location.href='/personal/index';
        }else{
          this.$message.error(response.data.msg);
        }
      })
    }
  },
}
</script>
<style scoped>
  #main_div{
    height: 500px;
    background-size: cover;/*设置为封面*/
    background-position: center;/*设置背景图片居中*/
    background-image: url('/public/imgs/loginbg.gif');
    overflow: hidden;/*解决粘连问题*/
  }
</style>